import React, { Component } from 'react'

export default class ToDoList extends Component {
    state = {list:JSON.parse(localStorage.getItem('todolist')) || []}
    //组件  状态  响应（驱动）  视图

    // changeValue = (e) =>{
    //     this.setState({val:e.target.value})
    // }
    addItem = (e)=>{
        // console.log(this.e.keyCode);
        if(e.keyCode == 13){
            // this.state.list.push(this.state.val);
            // this.setState({list:this.state.list});
            
            // this.setState({list:[this.state.val,...this.state.list]})
            //setState是异步的,若localStorage.setItem（this.setState）,则是先存了前一个的，才更新
 // 本地存储方法一
        //     let arr = ({list:[
        //                         {title:e.target.value,time:Date.now()},
        //                         ...this.state.list
        //                         ]
        //                     })      //这种方法比{list:[this.state.val...]}代码更简洁，不必再定义changeValue
        //     this.setState({list:arr});
        //     localStorage.setItem('todolist',JSON.stringify(arr));
        // }
// 本地存储方法二
        this.setState({list:[
                            {title:e.target.value,time:Date.now(),username:'',password:"",email:''},
                            ...this.state.list
                            ]
                        },()=>{
                            localStorage.setItem('todolist',JSON.stringify(this.state.list));
                    })      //回调函数的形式，立即执行
        }

    }

//删除
    delItem =(i)=> {
        //不建议这样写
        // this.state.list.splice(i,1);
        // this.setState({list:this.state.list})

        // 建议这样写
        //一个新的对象、数组的引用，指向一个新的地址，没有对原数组进行直接的更改
        // ilter((item,index)=>i !== index)：过滤器，满足i !== index的都留下
        let newList = this.state.list.filter((item,index)=>i !== index)
        this.setState({list:newList});
        localStorage.setItem('todolist',JSON.stringify(newList));
    }

    del =(i)=>{                 //del是调用函数，直接执行
        return (e)=>{            //此时，这个return才是事件处理函数
            console.log(i);
            console.log(e);
        }
    }

    saveData = (type)=>{
        return (e)=>{
            this.setState({
                [type]:e.target.value
            })
        }
    }

    render() {
        const {list,username,pwd,email} = this.state;
        
        return (
            <div>
                <input name='username' value={username} onChange={this.saveData('username')}/>
                <input name='pwd' value={pwd} onChange={this.saveData('pwd')}/>
                <input name='pwd' value={email} onChange={this.saveData('email')}/>
                <input 
                    // onChange={this.changeValue} 
                    // value={val} 
                    onKeyUp={this.addItem}
                    placeholder='添加TODO'/>
                    <h2>{list.length}</h2>
                <ul>
                    {list.map((val,index)=><li key={val.time}>
                        <input type='checkbox'/>
                        {val.title}
                        ---
                        {val.time}
                        <button onClick={()=>this.delItem(index)}>删除</button>
                        <button onClick={this.del(index)}>删除</button>
                    </li>)}
                </ul>
            </div>
        )
    }
}
